<template>
  <div>
    <el-menu
        style="width: 200px; min-height: 100vh"
        :default-active="path"
        router
        class="el-menu-vertical-demo"
        @select="handleSelect"
    >
      <el-sub-menu index="1">
        <template #title><b>房间管理</b></template>
        <el-menu-item index="/HotelRoom">客房管理</el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="2">
        <template #title><b>入住管理</b></template>
        <el-menu-item index="/CheckIn">客人登记</el-menu-item>
        <el-menu-item index="/CheckOut">退房登记</el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="3">
        <template #title><b>财务管理</b></template>
        <el-menu-item index="/Finance">销售额展示</el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="4">
        <template #title><b>订单管理</b></template>
        <el-menu-item index="/HotelBooking">订单展示</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "Aside",
  data() {
    return {
      path: this.$route.path // 设置菜单栏高亮
    }
  },
  methods: {
    handleSelect(index) {
      // 可以在这里处理选中菜单项的逻辑
      console.log('Selected menu item:', index);
    }
  }
}
</script>

<style scoped>
/* 默认样式 */
.el-menu-item.is-active,
.el-sub-menu .el-menu-item:hover {
  background-color: #ffaa50 !important; /* 橘色背景 */
  color: white !important;
}

/* 选中样式 */
.el-menu-item.is-active {
  background-color: #ffaa50 !important; /* 橘色背景 */
  color: white !important;
}

/* 二级菜单选中样式 */
.el-sub-menu .el-menu-item.is-active {
  background-color: #ffaa50 !important; /* 橘色背景 */
  color: white !important;
}

/* 一级菜单标题悬停样式 */
.el-sub-menu__title:hover {
  background-color: #ffaa50 !important; /* 橘色背景 */
  color: white !important;
}

/* 一级菜单标题选中样式 */
.el-sub-menu.is-active .el-sub-menu__title {
  background-color: #ffaa50 !important; /* 橘色背景 */
  color: white !important;
}
</style>